<template>
	<view class="matchmaker-card">
		<image class="matchmaker-card-shadow" mode="scaleToFill" src="@/static/images/matchmaker/matchmaker-card-background.png"></image>
		<view class="matchmaker-card-content" :class="{ full: !matchmaker }">
			<template v-if="matchmaker">
				<view class="matchmaker-card-top">
					<view class="matchmaker-card-face">
						<image class="matchmaker-card-face-image" :src="matchmaker.avatar || errorImageSrc" mode="aspectFill"></image>

						<image class="matchmaker-card-face-vip" v-if="matchmaker.is_vip" :src="matchmaker.vip_file"></image>
					</view>
					<view class="matchmaker-card-user">
						<view class="matchmaker-card-user-name">{{ matchmaker.nickName }}</view>
						<view class="matchmaker-card-user-note">{{ matchmaker.real_name }}</view>
					</view>
				</view>
				<view class="matchmaker-card-text">
					<view class="matchmaker-card-text-item">绑定时间：{{ matchmaker.bindtime }}</view>
					<view class="matchmaker-card-text-item">最后上线：{{ matchmaker.logintime }}</view>
					<view class="matchmaker-card-text-item">所在地址：{{ matchmaker.province }}{{ matchmaker.city }}</view>
				</view>
				<view class="matchmaker-card-btn" @tap.stop="chatToMachmaker">聊天</view>
			</template>
			<image v-else @tap="scanMatchmakerCode" class="matchmaker-card-bind" src="@/static/images/matchmaker/background-bind-matchmaker.png" mode="aspectFill"></image>
		</view>
	</view>
</template>

<script>
import { updateMemberMatchmaker } from '@/store/dispatches.js';
import { mapState } from 'vuex';
import Tools from '@/utils/Tools.js';
export default {
	data() {
		return {};
	},
	computed: {
		...mapState({
			matchmaker: state => state.user.matchmaker
		})
	},
	mounted() {
		updateMemberMatchmaker();
	},
	methods: {
		refreshData() {
			updateMemberMatchmaker();
		},
		chatToMachmaker() {
			this.$emit('onChat', { key: this.matchmaker.user_id });
		},
		scanMatchmakerCode() {
			uni.scanCode({
				success: res => {
					const result = res.result;
					if (this.$u.test.url(result) && result.indexOf('/s/') >= 0) {
						const resultTemp = result.split('/s/');
						if (resultTemp.length == 2) {
							const code = resultTemp[1];
							this.bindMatchmaker(code);
						}
					}
				}
			});
		},
		bindMatchmaker(code) {
			if (code) {
				uni.showModal({
					title: '操作确认',
					content: '请确认是否绑定红娘，绑定后24小时无法解除绑定',
					success: result => {
						if (result.confirm) {
							this.$u.api
								.postBindCupid(code)
								.then(res => {
									updateMemberMatchmaker();
									Tools.showSuccess('绑定成功');
								})
								.catch(e => {
									Tools.showError('绑定失败');
								});
						}
					}
				});
			}
		}
	}
};
</script>

<style scoped lang="scss">
.matchmaker-card {
	position: relative;
	width: 521rpx;
	height: 554rpx;
	.matchmaker-card-shadow {
		width: 477rpx;
		height: 505rpx;
		position: absolute;
		top: 94rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 1;
	}
	.matchmaker-card-content {
		box-shadow: 0px 4rpx 12rpx 4rpx rgba(0, 0, 0, 0.12);
		position: absolute;
		width: 521rpx;
		height: 554rpx;
		border-radius: 50rpx;
		background: rgba(255, 255, 255, 1);
		z-index: 20;
		padding: 56rpx 44rpx 0;
		&.full {
			padding: 0;
		}
		.matchmaker-card-bind {
			width: 521rpx;
			height: 554rpx;
			border-radius: 50rpx;
		}
		.matchmaker-card-top {
			height: 110rpx;
			display: flex;
			.matchmaker-card-face {
				height: 110rpx;
				width: 110rpx;
				position: relative;
				flex-shrink: 0;
				.matchmaker-card-face-image {
					height: 110rpx;
					width: 110rpx;
					border-radius: 110rpx;
					margin-right: 0;
				}
				.matchmaker-card-face-vip {
					width: 45rpx;
					height: 45rpx;
					position: absolute;
					right: -6rpx;
					bottom: 0;
				}
			}
			.matchmaker-card-user {
				margin-left: 20rpx;
				height: 110rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				&-name {
					height: 37rpx;
					font-size: 30rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 1);
					line-height: 37rpx;
				}
				&-note {
					margin-top: 20rpx;
					height: 28rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(151, 151, 151, 1);
					line-height: 28rpx;
				}
			}
		}
		.matchmaker-card-text {
			margin-top: 23rpx;
			overflow: hidden;
			.matchmaker-card-text-item {
				height: 33rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(151, 151, 151, 1);
				line-height: 33rpx;
				margin-top: 30rpx;
			}
		}
		.matchmaker-card-btn {
			height: 70rpx;
			background: linear-gradient(180deg, rgba(237, 79, 93, 1) 0%, rgba(251, 122, 142, 1) 100%);
			border-radius: 35rpx;
			color: #fff;
			margin-top: 55rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
</style>
